<template>
  <tm-app>
    <tm-navbar
      title="零元购专区"
      :followTheme="true"
      :hideHome="true"
      :hideBack="false"
    >
    </tm-navbar>
    <tm-sheet :margin="[20]" :padding="[20]" :round="4">
      <CustomWaterfallsFlow
        ref="waterfallsFlowRef"
        @wapperClick="wapperClick"
        @imageClick="wapperClick"
        :value="state.imglist"
      >
        <view
          v-for="(item, index) in state.imglist"
          :key="index"
          slot="slot{{index}}"
          class="flex flex-col flex-col-center-start"
        >
          <view class="pt-12 pb-12 p-12 flex flex-col flex-col-top-start">
            <tm-text
              :font-size="32"
              color="#000"
              :label="item.giftName"
            ></tm-text>
            <tm-text
              :font-size="24"
              _class="mt-n3"
              :label="`${item.giftPrice}`"
            ></tm-text>
          </view>
          <view class="flex-center fulled">
            <tm-button
              label="点击免费拿"
              :round="10"
              :margin="[20]"
              @click="navigateTo(item)"
              :shadow="0"
              :followTheme="true"
              :height="70"
              linear="right"
              linearDeep="accent"
            ></tm-button>
          </view>
        </view>
      </CustomWaterfallsFlow>
    </tm-sheet>
  </tm-app>
</template>

<script setup>
import { computed } from "@vue/reactivity";
import CustomWaterfallsFlow from "./components/custom-waterfalls-flow.vue";
import { reactive, onMounted } from "vue";
import { getMarketingGiftApi } from "@/api";
import { onLoad } from "@dcloudio/uni-app";

const state = reactive({
  imglist: [],
});
const getWidth = computed(() => {
  const { torpx, getWindow } = uni.$tm.u;
  return torpx(getWindow().width) - 80;
});

onLoad(async () => {
  const result = await getMarketingGiftApi();
  state.imglist = result.map((item) => {
    item["image"] = item["giftCover"];
    return item;
  });
});

const navigateTo = (item) => {
  uni.navigateTo({
    url: "/shopPages/friend-help?id=" + item.id,
  });
};

const wapperClick = (e) => {
  console.log(e);
};

const getSlotName = (index) => {
  return "slot" + index;
};
</script>
